<template>
  <div class="member-list">
    <template v-if="$route.path == '/home/memberlist'">
      <el-table
        :data="memberList"
        stripe
        style="width: 100%"
        row-key="id"
      >
<!--        会员编号-->
        <el-table-column
          prop="uid"
          label="会员编号"
          width="80">
        </el-table-column>
<!--        会员名-->
        <el-table-column
          prop="nickname"
          label="会员名"
          width="120">
        </el-table-column>
<!--        电话号码-->
        <el-table-column
          prop="phone"
          label="电话号码"
          width="120">
        </el-table-column>
        <!--        会员密码-->
<!--        <el-table-column-->
<!--          prop="password"-->
<!--          label="会员密码"-->
<!--          width="120">-->
<!--        </el-table-column>-->
<!--        会员状态-->
        <el-table-column
          prop="status"
          label="角色状态">
          <template slot-scope="item">
            <el-switch
              :value="item.row.status"
              active-color="#f00"
              inactive-color="#eee"
              :active-value="1"
              :inactive-value="2">
            </el-switch>
          </template>
        </el-table-column>
        <!--      操作-->
        <el-table-column width="200" label="操作">
          <template slot-scope="item">
            <el-button type="success" icon="el-icon-edit" size="mini" @click="editItem(item.row.uid)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[2, 4, 6, 8]"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pagesize"
          :total="total">
        </el-pagination>
      </el-row>
    </template>
    <el-row>
      <router-view></router-view>
    </el-row>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "vUserInfo",
    created() {
      this.$store.dispatch('updatamember',{size: this.pagesize, page: this.page})
    },
    watch: {// 监听 memberList 变化 变化后更新 管理者总数
      memberList: {
        handler(){
          this.getTotalDate()
        },
        deep: true
      }
    },
    computed: {
      ...mapState(['memberList'])
    },
    data() {
      return {
        total: 0,
        pagesize: 3,
        page: 1
      }
    },
    methods: {
      //数据总数
      getTotalDate(){
        this.axios({
          url: '/api/membercount',
          method: 'get'
        }).then(res =>  {
          this.total = res.list[0].total
        })
      },
      //当每页显示条数发生变化时触发
      handleSizeChange(val) {
        this.pagesize = val
        //重新请求数据 页码回到第一页
        this.$store.dispatch('updatemember',{size:this.pagesize,page: 1})
      },
      //当页码发生变化时触发
      handleCurrentChange(val) {
        this.page = val
        this.$store.dispatch('updatemember',{size:this.pagesize,page: this.page})
      },
      //修改菜单信息功能
      editItem(id) {
        this.$router.push('/home/memberlist/memberedit/'+ id)
      }
    },

  }
</script>

<style scoped>

</style>
